<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .box {
      display: flex;
      margin: 200px;
      min-height: 400px;
    }
    #chart {
      width: 800px;
      border: 2px dashed #ccc;
      border-left: 0px;
      border-right: 0px;
      position: relative;
    }
    #chart_column {
    }
    .left-list {
      position: absolute;
    }
    .sub_height {
      width: 100%;
      border-top: 2px dashed #ccc;
      position: relative;
    }
    #chart .sub_height:first-of-type {
      border-top: 0px dashed #ccc;
    }
    .line_style {
      position: absolute;
      left: 0;
      width: 100%;
      border: 1px solid #f9fafd;
    }
    .div_column {
      text-align: center;
    }
    .div_border {
      position: absolute;
      height: 4px;
      border-radius: 2px;
    }
  </style>
  <body>
    <div class="box">
      <div id="chart_column"></div>
      <div id="chart"></div>
    </div>
  </body>
  <script>
    let category = [
      { name: '地图', index: 3 },
      { name: '其他', index: 2 },
      { name: 'DFX', index: 1 },
    ]
    let chart = document.getElementById('chart') // 根据纵列的数量生成曲线和实线
    // 获取图的总高度  纵列的个数 通过纵列的个数平均分配图的总高度
    const CHART_HEIGHT = chart.clientHeight
    // 图要被拆分的个数
    const SPLIT_NUM = category.length
    // 每一块的高度
    const SUB_HEIGHT = (CHART_HEIGHT / SPLIT_NUM).toFixed(2)
    // 每一块内的分为四块每块的举例顶部的高度
    const LINE_MARGHT_TOP = (SUB_HEIGHT / 4).toFixed(2)
    const CHART_WIDTH = chart.clientWidth
    let chartColumn = document.getElementById('chart_column')
    // 生成y轴列的
    function setYColumn() {}
    // 生成y轴的列
    function setYListLine() {
      category.map((val) => {
        let div_line = setDiv()
        let div_column = setDiv()
        div_line.className = 'sub_height'
        div_line.style.height = SUB_HEIGHT + 'px'
        div_column.style.height = SUB_HEIGHT * 1 + 2 + 'px'
        div_column.style.lineHeight = SUB_HEIGHT * 1 + 2 + 'px'
        div_column.className = 'div_column'
        div_column.innerText = val.name
        div_column.setAttribute('data-index', val.index)
        chartColumn.appendChild(div_column)
        for (let i = 0; i < 3; i++) {
          let line = document.createElement('div')
          line.className = 'line_style'
          line.style.top = LINE_MARGHT_TOP * (i + 1) + 'px'
          div_line.appendChild(line)
        }
        chart.appendChild(div_line)
      })
    } // 生成div
    function setDiv() {
      let div = document.createElement('div')
      return div
    }
    const data = [
      { name: '其他', value: 30, type: 3, index: 2 },
      { name: '其他', value: 15, type: 3, index: 2 },
      { name: 'DFX', value: 20, type: 1, index: 1 },
      { name: '地图', value: 21, type: 2, index: 3 },
      { name: '地图', value: 15, type: 1, index: 3 },
      { name: '其他', value: 12, type: 2, index: 2 },
      { name: 'DFX', value: 11, type: 2, index: 1 },
      { name: '其他', value: 5, type: 1, index: 2 },
    ]

    //将数据放到图中
    function setDataChart() {
      // 遍历图例数据和实际数据
      // 如果index相同就进行一个矩形插入定位 横坐标为value的值纵坐标为(index-1)*SUB_HEIGHT
      data.map((val) => {
        let resect = document.createElement('span')
        let b = CHART_WIDTH / 60
        console.log(b, '比率')
        let y =
          (val.index - 1) * SUB_HEIGHT + val.type * LINE_MARGHT_TOP + 1 + 'px'
        let x = val.value * b + 'px'
        let width = val.value * b + 'px'
        resect.className = 'div_border'
        switch (val.type) {
          case 1:
            setResectStyle(resect, width, 'blue', x, y)
            break
          case 2:
            setResectStyle(resect, width, 'yellow', x, y)
            break
          case 3:
            setResectStyle(resect, width, 'green', x, y)
            break
        }
        chart.appendChild(resect)
      })
    }
    function setResectStyle(resect, width, color, x, y) {
      resect.style.background = color
      resect.style.bottom = y
      resect.style.width = width
      resect.style.left = x
      resect.style.zIndex = 2
      resect.style.display = 'block'
      return resect
    }
    // 自动生成x轴的坐标系
    function setXLable() {
      let SHARE = 5
      let arr = [...new Set(data.map((val) => val.value))]
      //  坐标轴分为5份 每份间隔多少
      //   取出数据中最大的  最大的进行向上取整
      let max = Math.ceil(Math.max(...arr) / 10) * 10
      let shareNumber = max / 5
      console.log(shareNumber)
      for (let i = 0; i < 6; i++) {
        let xAxis = document.createElement('span')
        xAxis.style.display = 'block'
        xAxis.style.position = 'absolute'
        xAxis.innerText = i * shareNumber * 2 + ''
        xAxis.style.left = i * 20 + '%'
        console.log(xAxis)
        chart.appendChild(xAxis)
      }
    }
    setDataChart()
    setYListLine()
    setXLable()
  </script>
</html>
